<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS onchange事件</title>
	<style>
	*{font-size: 25px;}
	</style>
</head>
<body>
	<h1>表单事件 onchange 地址联动效果</h1>
	<hr>
	<div>选择你的age</div>
	<select id="age1"></select>
	<select id="age2"></select>
	<script>
	var age1 = document.getElementById('age1');
	var age2 = document.getElementById('age2');

	//在第一个select框中输出默认值
	for (var i = 21; i < 40; i++) {
		age1.add(new Option(i,i));
	}

	//给第一个select绑定change事件,改变第二个select的值
	age1.onchange=function() {
		//清空之前生成的option
		age2.options.length =0;
		//获取要选择的option
		var index =age1.value;
		//遍历生成age2的option	
		for (var i = index; i < 40; i++) {
			age2.add(new Option(i,i));
		};
	}
	//调用用于加载页面时显示一个默认信息
	age1.onchange();
	</script>
</body>
</html>